<script setup lang="ts">
import { type RouteLocationRaw, RouterLink } from 'vue-router';

export type TRoute = [lable: string, to?: RouteLocationRaw];

const props = defineProps<{
  routes: Array<TRoute>;
}>();
const appStore = useAppStore();

const routes = computed<Array<TRoute>>(() => [
  [appStore.handshake?.is_agent ? 'Home' : 'G9.GAME', { name: RN.INDEX }],
  ...props.routes ?? [],
]);
</script>

<template>
  <div class="flex items-center">
    <template v-for="item of routes" :key="item[0]">
      <RouterLink v-if="item[1]" class="item" :to="item[1]">
        {{ item[0] }}
      </RouterLink>
      <span v-else class="item">{{ item[0] }}</span>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.item {
  --uno: 'flex items-center text-sys-text-body cursor-pointer transition-all hover:text-sys-text-head';

  & + & {
    --uno: 'ml-[0.5em]';

    &::before {
      --uno: 'block i-ion:ios-arrow-right mr-[0.5em] text-sys-text-body';
      content: '';
    }
  }

  &:last-child {
    --uno: 'text-sys-text-head cursor-default';
  }
}
</style>
